<template lang="html">
  <div class="user">
    <header id='header'></header>
    <div class='head'>
      <img class="headImg" v-if="UserInfo.prelogo" :src="`${imgUrl}${UserInfo.prelogo}`">
      <img class="headImg" v-else src="../../../static/index/ioc-12.png">
      <div class='info'>
        <p>欢迎你的登录</p>
        <p>{{UserInfo.userid}}
          <span v-if="UserInfo.per_certify === 1 | UserInfo.com_certify === 1">
            ( <img src="../../../static/index/ioc-27.png" alt=""/> 已认证 )
          </span>
        </p>
        <div class='hed'>
          <router-link tag="p" to="/signAward"> 积分:{{UserInfo.score}} <span class="trangle"></span></router-link>
          <router-link tag="p" to="/CreditNum">信用值:{{UserInfo.credit}} <span class="trangle"></span></router-link>
        </div>
      </div>
      <!-- 账户资料 -->
      <router-link tag="span" to="/AccountData" class='userSet'>
        <img src="../../../static/index/ioc-26.png" alt=""/>账户资料
      </router-link>
    </div>
    <!-- 列表 -->

    <ul class="mui-table-view">
      <li class="mui-table-view-cell bet">
        <router-link to='/signAward' class='hed'>
          <img src="../../../static/index/ioc-24.png" alt="">
          签到领积分
          <img src="../../../static/index/right.png" alt="">
        </router-link>
      </li>
      <li class="mui-table-view-cell bet">
        <router-link to='/coin' class='hed'>
          <img src="../../../static/index/ioc-25.png" alt="">
          金币
          <img src="../../../static/index/right.png" alt="">
        </router-link>
      </li>
    </ul>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell bet">
        <router-link to='/publish' class='hed'>
          <img src="../../../static/index/ioc-06.png" alt="">
          我的发布
          <img src="../../../static/index/right.png" alt="">
        </router-link>
      </li>
      <li class="mui-table-view-cell bet">
        <router-link to='/collect' class='hed'>
          <img src="../../../static/index/ioc-07.png" alt="">
          我的收藏
          <img src="../../../static/index/right.png" alt="">
        </router-link>
      </li>
      <!-- <li class="mui-table-view-cell bet">
        <router-link to='#' class='hed'>
          <img src="../../../static/index/ioc-08.png" alt="">
          浏览记录
          <img src="../../../static/index/right.png" alt="">
        </router-link>

      </li> -->
      <!-- <li class="mui-table-view-cell bet">
        <router-link to='#' class='hed'>
          <img src="../../../static/index/ioc-09.png" alt="">
          删除信息
          <img src="../../../static/index/right.png" alt="">
        </router-link>

      </li> -->
      <li class="mui-table-view-cell bet">
        <router-link to='/contact' class='hed'>
          <img src="../../../static/index/ioc-10.png" alt="">
          联系我们
          <img src="../../../static/index/right.png" alt="">
        </router-link>

      </li>
    </ul>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell hed" @click='loginOff'>
        <img src="../../../static/index/ioc-11.png" alt="">
        安全退出
      </li>
    </ul>

  </div>
</template>

<script>
  import {getStore, removeStore} from '@/config/mUtils'

  export default {
    name: 'user',
    data() {
      return {
        UserInfo: {},
        imgUrl: 'http://menpuwang.com/',
      }
    },
    created() {
      this.initDate()
    },
    methods: {
      initDate() {
        this.$axios.post('user/info', this.qs.stringify({
          "token": getStore('token')
        })).then((res) => {
          this.UserInfo = res.data.data
        });
      },
      loginOff() {
        this.$dialog.confirm({
          title: '确定退出当前账号吗？',
          // message: '弹窗内容'
        }).then(() => {
          removeStore("name")
          removeStore("psd")
          removeStore("token")
          this.$router.push('/login')
        }).catch(() => {
          this.$toast.fail('取消操作')
        });
      }
    }
  }

</script>

<style scoped lang='scss'>
  @import "../../../static/css/user/userinfo.scss";

  .signAwardInfo {
    background-image: url("../../../static/index/bj-01.jpg");
  }

  .mui-table-view {
    li {
      position: relative !important;

      a {
        img {
          top: 25px;

          &:last-child {
            right: 5px !important;
          }
        }
      }
    }

  }
</style>
